<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>键盘事件</title>
</head>
<!-- 
            1.Vue中常用的按键别名
                    回车 =>enter
                    删除 =>delete（捕获“删除”和“退格”键）
                    退出 =>esc
                    空格 =>space
                    换行 =>tab  （特殊必须配合keydown使用）keyup是松开的时候，keydown是按下的时候，比如tab就不适合用keyup，因为还没有keyup的时候按下的时候自身有个功能就是从当前元素移走，当keyup的时候已经无效了
                    上 =>up
                    下 =>down
                    左 =>left
                    右 =>right

            2.Vue未提供别名的按键，可以使用原始的key（event.key）去绑定，但注意要转为kebab-case（横线命名）
                    比如Control  转化control
                        CapsLock这种多个单词转化为caps-lock

            3.不是所有的按键都可以捕获，因为有的键盘五花八门，不一定被识别

            4.系统修饰键（特殊1）：ctrl   alt   shift   meta(windows键盘)
                    (1).配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发
                    (2).配合keydown使用：正常触发


                    （特殊2）
                    (1).配合keyup使用，down直接移动到其他元素身上，up的时候无效，无法触发
                    (2).配合keydown使用：正常触发


            5.Vue.config.keyCodes.自定义键名=键码（event.keyCode）  可以自定义键名

        -->

<body>
    <div id="root">
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script>
        const Vm = new Vue({
            el: "#root",
            data: {
                name: "张名师",
                adderss: ""
            },
            methods: {
                showInfo(e) {
                    // 原生js回车事件，用keyCode判断是否为回车
                    // if (e.keyCode != 13) return
                    console.log(e.target.value)


                }
            }
        })
    </script>
</body>

</html>